<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>wicket-foundation</title>
</head>
<body>
  <wicket:extend>

    <div class="row">
      <h1 id="grid">Grid</h1>
      <h3 class="subheader">Create powerful multi-device layouts
        quickly and easily with the default 12-column, nest-able
        Foundation grid. If you&#39;re familiar with grid systems,
        you&#39;ll feel right at home. If not, you&#39;ll learn quickly.</h3>
      <hr>
      <h3>Basic</h3>
      <p>
        Start by adding an element with a class of
        <code>row</code>
        . This will create a horizontal block to contain vertical
        columns. Then add divs with a
        <code>column</code>
        class within that row. You can use
        <code>column</code>
        or
        <code>columns</code>
        - the only difference is grammar. Specify the widths of each
        column with the small-#, medium-#, and large-# classes.
      </p>
      <p>
        <strong>Foundation is mobile-first</strong>. Code for small
        screens first, and larger devices will inherit those styles.
        Customize for larger screens as necessary.
      </p>
      <h4>HTML</h4>
      
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"small-2 large-4 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"small-4 large-4 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
              class="attribute">class</span>=<span class="value">"small-6 large-4 columns"</span>&gt;</span>...<span
              class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"large-3 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"large-6 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
              class="attribute">class</span>=<span class="value">"large-3 columns"</span>&gt;</span>...<span
              class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"small-6 large-2 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"small-6 large-8 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"small-12 large-2 columns"</span>&gt;</span>...<span
            class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"small-3 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"small-9 columns"</span>&gt;</span>...<span
            class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"large-4 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
              class="attribute">class</span>=<span class="value">"large-8 columns"</span>&gt;</span>...<span
              class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"small-6 large-5 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
              class="attribute">class</span>=<span class="value">"small-6 large-7 columns"</span>&gt;</span>...<span
              class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span
            class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
          class="attribute">class</span>=<span class="value">"large-6 columns"</span>&gt;</span>...<span
          class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span
              class="attribute">class</span>=<span class="value">"large-6 columns"</span>&gt;</span>...<span
              class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></code>
</pre>

      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="small-2 large-4 columns">
          <span class="show-for-small">2</span><span
            class="hide-for-small">4</span>
        </div>
        <div class="small-4 large-4 columns">4</div>
        <div class="small-6 large-4 columns">
          <span class="show-for-small">6</span><span
            class="hide-for-small">4</span>
        </div>
      </div>
      <div class="row display">
        <div class="large-3 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">3</span>
        </div>
        <div class="large-6 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">6</span>
        </div>
        <div class="large-3 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">3</span>
        </div>
      </div>
      <div class="row display">
        <div class="small-6 large-2 columns">
          <span class="show-for-small">6</span><span
            class="hide-for-small">2</span>
        </div>
        <div class="small-6 large-8 columns">
          <span class="show-for-small">6</span><span
            class="hide-for-small">8</span>
        </div>
        <div class="small-12 large-2 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">2</span>
        </div>
      </div>
      <div class="row display">
        <div class="small-3 columns">3</div>
        <div class="small-9 columns">9</div>
      </div>
      <div class="row display">
        <div class="large-4 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">4</span>
        </div>
        <div class="large-8 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">8</span>
        </div>
      </div>
      <div class="row display">
        <div class="small-6 large-5 columns">
          <span class="show-for-small">6</span><span
            class="hide-for-small">5</span>
        </div>
        <div class="small-6 large-7 columns">
          <span class="show-for-small">6</span><span
            class="hide-for-small">7</span>
        </div>
      </div>
      <div class="row display">
        <div class="large-6 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">6</span>
        </div>
        <div class="large-6 columns">
          <span class="show-for-small">full</span><span
            class="hide-for-small">6</span>
        </div>
      </div>
      <hr>
      <h3 id="small-grid">Small Grid</h3>
      <p>Small grids expand to large screens easier than large grids
        cram into small screens.</p>
      <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-2 columns"</span>&gt;</span>2 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-10 columns"</span>&gt;</span>10 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-3 columns"</span>&gt;</span>3 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-9 columns"</span>&gt;</span>9 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>  
</div></code>
</pre>

      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="small-2 columns">2 columns</div>
        <div class="small-10 columns">10 columns</div>
      </div>
      <div class="row display">
        <div class="small-3 columns">3 columns</div>
        <div class="small-9 columns">9 columns</div>
      </div>
      <hr>
      <h3 id="medium-grid">Medium Grid</h3>
      <p>Medium sized screens will inherit styles from small, unless
        you specify a different layout, using the medium grid classes.</p>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-2 columns"</span>&gt;</span>2 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-10 columns"</span>&gt;</span>10 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns"</span>&gt;</span>3 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-9 columns"</span>&gt;</span>9 columns<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>
      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="medium-2 columns">2 columns</div>
        <div class="medium-10 columns">10 columns</div>
      </div>
      <div class="row display">
        <div class="medium-3 columns">3 columns</div>
        <div class="medium-9 columns">9 columns</div>
      </div>
      <hr>
      <h3>Advanced</h3>
      <p>You can nest the grids indefinitely, though at a certain
        point it will get absurd.</p>
      <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-8 columns"</span>&gt;</span>8
    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
      <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-8 columns"</span>&gt;</span>8 Nested
        <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
          <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-8 columns"</span>&gt;</span>8 Nested Again<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
          <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-4 columns"</span>&gt;</span>4<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
        <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-4 columns"</span>&gt;</span>4<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-4 columns"</span>&gt;</span>4<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>
      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="small-8 columns">
          8
          <div class="row">
            <div class="small-8 columns">
              8 Nested
              <div class="row">
                <div class="small-8 columns">8 Nested Again</div>
                <div class="small-4 columns">4</div>
              </div>
            </div>
            <div class="small-4 columns">4</div>
          </div>
        </div>
        <div class="small-4 columns">4</div>
      </div>
      <hr>
      <h3 id="offsets">Offsets</h3>
      <p>
        Move blocks up to 11 columns to the right by using classes like
        <code>.large-offset-1</code>
        and
        <code>.small-offset-3</code>
        .
      </p>
      <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-1 columns"</span>&gt;</span>1<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-11 columns"</span>&gt;</span>11<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-1 columns"</span>&gt;</span>1<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-10 large-offset-1 columns"</span>&gt;</span>10, offset 1<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-1 columns"</span>&gt;</span>1<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-9 large-offset-2 columns"</span>&gt;</span>9, offset 2<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-1 columns"</span>&gt;</span>1<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-8 large-offset-3 columns"</span>&gt;</span>8, offset 3<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>
      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="large-1 columns">1</div>
        <div class="large-11 columns">11</div>
      </div>
      <div class="row display">
        <div class="large-1 columns">1</div>
        <div class="large-10 large-offset-1 columns">10, offset 1</div>
      </div>
      <div class="row display">
        <div class="large-1 columns">1</div>
        <div class="large-9 large-offset-2 columns">9, offset 2</div>
      </div>
      <div class="row display">
        <div class="large-1 columns">1</div>
        <div class="large-8 large-offset-3 columns">8, offset 3</div>
      </div>
      <hr>
      <h3 id="incomplete-rows">Incomplete Rows</h3>
      <p>
        In order to work around browsers&#39; different rounding
        behaviors, Foundation will float the last column in a row to the
        right so the edge aligns. If your row doesn&#39;t have a count
        that adds up to 12 columns, you can tag the last column with a
        class of
        <code>end</code>
        in order to override that behavior.
      </p>
      <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns"</span>&gt;</span>3<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns"</span>&gt;</span>3<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns"</span>&gt;</span>3<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns"</span>&gt;</span>3<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns"</span>&gt;</span>3<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-3 columns end"</span>&gt;</span>3 end<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>
      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="medium-3 columns">3</div>
        <div class="medium-3 columns">3</div>
        <div class="medium-3 columns">3</div>
      </div>
      <div class="row display">
        <div class="medium-3 columns">3</div>
        <div class="medium-3 columns">3</div>
        <div class="medium-3 columns end">3 end</div>
      </div>
      <hr>
      <h3 id="centered-columns">Centered Columns</h3>
      <p>
        Center your columns by adding a class of
        <code>small-centered</code>
        to your
        <code>column</code>
        . Large will inherit small centering by default, but you can
        also center solely on large by applying a
        <code>large-centered</code>
        class. To uncenter on large screens use
        <code>large-uncentered</code>
        .
      </p>
      <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-3 small-centered columns"</span>&gt;</span>3 centered<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-6 large-centered columns"</span>&gt;</span>6 centered<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-9 small-centered large-uncentered columns"</span>&gt;</span>9 centered<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-11 small-centered columns"</span>&gt;</span>11 centered<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>
      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="small-3 small-centered columns">3 centered</div>
      </div>
      <div class="row display">
        <div class="small-6 large-centered columns">6 centered,
          large</div>
      </div>
      <div class="row display">
        <div class="small-9 small-centered large-uncentered columns">9
          centered small</div>
      </div>
      <div class="row display">
        <div class="small-11 small-centered columns">11 centered</div>
      </div>
      <hr>
      <h3 id="source-ordering">Source Ordering</h3>
      <p>
        Using these source ordering classes, you can shift columns
        around between our breakpoints. This means if you place
        sub-navigation below main content on small displays, you have
        the option to position the sub-navigation on either the left or
        right of the page for large displays. Prefix push/pull with the
        size of the device you want to apply the styles to.
        <code>medium-push-#</code>
        ,
        <code>large-push-#</code>
        is the syntax you&#39;ll use. Use
        <code>large-reset-order</code>
        to reset pushed or pulled columns to their original position on
        large screens.
      </p>
      <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-10 small-push-2 columns"</span>&gt;</span>10<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-2 small-pull-10 columns"</span>&gt;</span>2, last<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-9 large-push-3 columns"</span>&gt;</span>9<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-3 large-pull-9 columns"</span>&gt;</span>3, last<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-8 large-push-4 columns"</span>&gt;</span>8<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"large-4 large-pull-8 columns"</span>&gt;</span>4, last<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-7 small-5 small-push-7 medium-push-5 columns"</span>&gt;</span>7<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-5 small-7 small-pull-5 medium-pull-7 columns"</span>&gt;</span>5, last<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-6 medium-push-6 columns"</span>&gt;</span>6<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"medium-6 medium-pull-6 columns"</span>&gt;</span>6, last<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>
      <h4>Rendered HTML</h4>
      <div class="row display">
        <div class="small-10 small-push-2 columns">10</div>
        <div class="small-2 small-pull-10 columns">2, last</div>
      </div>
      <div class="row display">
        <div class="large-9 large-push-3 columns">9</div>
        <div class="large-3 large-pull-9 columns">3, last</div>
      </div>
      <div class="row display">
        <div class="large-8 large-push-4 columns">8</div>
        <div class="large-4 large-pull-8 columns">4, last</div>
      </div>
      <div class="row display">
        <div class="medium-7 small-5 small-push-7 medium-push-5 columns">7</div>
        <div class="medium-5 small-7 small-pull-5 medium-pull-7 columns">5,
          last</div>
      </div>
      <div class="row display">
        <div class="medium-6 medium-push-6 columns">6</div>
        <div class="medium-6 medium-pull-6 columns">6, last</div>
      </div>
      <hr>
    </div>

  </wicket:extend>
</body>
</html>
